<template>
  <div class="error__message fs-14">
    <p class="tips flex-center"><span>{{ text }}</span></p>
    <div class="pop__code flex-basic mt-10">
        <img v-if="isXz" src="@/assets/code-image.png" width="130" height="130" alt="" />
        <img v-else-if="isYueShu" src="@/assets/code-image-yueshu.png" width="130" height="130" alt="" />
        <img v-else-if="isDll" src="@/assets/code-image-dll.png" width="130" height="130" alt="" />
        <p class="fs-14">
          多次遇到问题？<br />
          请联系客服为您解答
        </p>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ErrorMessage',
  props: {
    text: {
      type: String,
      default: '抱歉，当前模型未能响应此问题，您可以切换模型后重试！'
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isXz () {
      return process.env.VUE_APP_NAME === 'xz'
    },
    isYueShu () {
      return process.env.VUE_APP_NAME === 'yueshu'
    },
    isDll () {
      return process.env.VUE_APP_NAME === 'dll'
    }
  }
}
</script>

<style lang="scss" scoped>
.error__message {
  flex: 1 1 100%;
  padding: 0;
  line-height: 1.4;
  color: $color-white;
  .link {
    color: $color-primary2;
  }
  .tips {
    min-height: 32px;
  }
}
.pop__code {
  width: 320px;
  padding: 16px;
  background: rgba($color: $color-white, $alpha: 0.1);
  border-radius: 10px;
  gap: 14px;
  box-sizing: border-box;
  gap: 14px;
  color: $color-white;
  line-height: 1.4;
  transform: translateX(-40px);
}
</style>
<style lang="scss">
.error__message_pop {
  padding: 0;
  box-shadow: 0px 4px 20px 0px #0000001a;
}
</style>
